<template>
    <div class="dataContainer">
        <div class="companyDescription">
            <h1>SUPERCELL</h1>
            <p>Supercell is a game company based in Helsinki, Finland, with offices in San Francisco, Seoul, Shanghai
                and London. Since our launch in 2010, we've brought seven games to the global market – Hay Day, Clash of
                Clans, Boom Beach, Clash Royale, Brawl Stars, Squad Busters and mo.co. Our dream is to create great
                games that as many people as possible play for years and that are remembered forever.</p>
        </div>
        <div class="companyData">
            <div v-for="item in data" class="data-item">
                <span class="data-value">{{ item.value }}</span>
                <span class="data-label">{{ item.label }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import {reactive} from "vue";

const data = reactive([
    {label: 'Supercellians', value: '776'},
    {label: 'Offices', value: '5'},
    {label: 'Nationalities', value: '40+'},
    {label: 'Live Games', value: '7'},
    {label: 'Games in Dev', value: 'Many'},

])
</script>

<style scoped>
.dataContainer .companyDescription {
    margin: 90px auto;
}

.dataContainer .companyDescription h1 {
    text-align: center;
    margin: 20px 0;
    font-size: 34px;
    font-weight: bolder;
}

.dataContainer .companyDescription p {
    width: 780px;
    font-size: 18px;
    margin: 0 auto;
    line-height: 1.5;
}

.dataContainer .companyData {
    display: flex;
    justify-content: space-between;
    width: 780px;
    margin: 100px auto 80px auto;
}

.data-item {
    text-align: center;
    width: 170px;
    padding: 15px;
    border-right: 0.4px solid rgb(128, 128, 128);
}

.data-item:last-child {
    border-right: none;
}

.data-value {
    font-size: 18px;
    font-weight: bold;
}

.data-label {
    display: block;
    margin-top: 7px;
    font-size: 14px;
    font-weight: bold;
    color: rgb(45, 133, 243);
}
</style>